iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

React 30 天學習歷程系列 第 1

【Day 1 】前言 & 開發環境準備

  • 分享至 

  • xImage
  •  

前言

會寫這系列文,主要是因為之前的工作開始使用 React 做網頁前端開發。由於我是中途加到專案中,過去也沒有使用 React 的經驗,一開始光是了解團隊開發的架構就花了不少時間,對於 React 很多基礎的觀念都不甚清楚,寫得非常卡,只能處理 layout 相關的問題,和一些簡單的功能。因此希望能透過這次的自我挑戰逼自己花時間去重新了解 React。這系列文章主要是我觀看 udemy 上面的課程 最新react 入門到高級課程,包括 react hooks,以及實戰所做的筆記,希望可以藉由整理的過程釐清細節、方便自己未來可以隨時查詢,也希望能幫忙到少部分跟我一樣學習上比較緩慢的人。

開發環境準備

編輯器

這篇系列文使用的編輯器是 VsCode,可從官網下載。
https://ithelp.ithome.com.tw/upload/images/20200914/20129269nKW0kLsuYF.png

安裝 node + npm

由於會需要用到套件管理工具 npm,因此我們需要安裝 node.js,在安裝 node 時候 npm 會一併被安裝。可以至 Node.js 官網下載安裝 node.js 主程式。
https://ithelp.ithome.com.tw/upload/images/20200914/20129269eKncsmHXj0.png
安裝後可以透過在 terminal 輸入指令 node -v, npm -v來確認有無安裝成功。

使用 n 管理 node 版本

全域安裝 n。

npm install -g n

查看 node 版本列表指令: n list 或 n ls。

安裝 yarn

套件管理工具也可以使用 yarn, mac 用戶(windows 可以直接用 npm 安裝)需要用 HomeBrew 來安裝,要安裝 HomeBrew 可在終端機輸入以下指令。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

如果安裝完畢或已經安裝過,可以用更新指令來檢查安裝狀態

brew install yarn

安裝完 HomeBrew 後,我們就可以用它來安裝 yarn 囉

brew upgrade yarn

小結

到這邊,我們大概就將開發環境準備好了,下一篇會介紹常見安裝 React 的幾種方式。


下一篇
【Day 2】常見的 React 框架及安裝方式
系列文
React 30 天學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言